<template lang="pug">
map-loader(@loaded="init" v-once)
h1 {{ $t('menu.amap') }}
div(style="height:400px;padding:0;")
  div(id="map")
    Corner(@location="locate" @search="search" @speak="speak")
</template>

<script lang="ts">
export default {
  name: 'AMap'
}
</script>
<script lang="ts" setup>
import MapLoader from "./widgets/maploader.vue"
import Corner from './car/Corner.vue'
import {ref} from 'vue'

const picker = ref({})

const start = ref<AMap.LngLat>()
const map = ref<AMap.Map>()
const location = ref<AMap.Geolocation>()

const init = () => {

  map.value = new AMap.Map('map', {
        center: [114.468497, 30.427877],
        zoom: 13,
        mapStyle: 'amap://styles/light'
      },
  )

  location.value = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
    // 设置定位超时时间，默认：无穷大
    timeout: 10000,
    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    // buttonOffset: new AMap.Pixel(10, 20),
    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    zoomToAccuracy: false,
    //  定位按钮的排放位置,  RB表示右下
    // buttonPosition: 'RB'
    showButton: false
  })
  map.value.addControl(location.value)

  location.value.getCurrentPosition((status: string, result: any) => {
    start.value = result.position
    map.value!!.setCenter(result.position)
  });

  const driving = new AMap.Driving({
    map: map.value,
    // panel: "panel"
  });

  const navi = (begin: AMap.LngLat, end: AMap.LngLat) => {
    driving.search(begin, end, function (status, result) {
      console.log(status, result)
    })
  }

  picker.value = new AMapUI.PoiPicker({
    city: '武汉',
    placeSearchOptions: {
      map: map.value,
      pageSize: 10
    },
    // searchResultsContainer: 'result'
  })

  picker.value.on('poiPicked', function (res: any) {
    navi(start.value!, res.item.location)
    console.log(res)
  })

}

const locate = () => {
  console.log("locate triggered")
  location.value!!.getCurrentPosition((status: string, result: any) => {
    start.value = result.position
    map.value!!.setCenter(result.position)
  })
}

const speak = () => {
  console.log("speak triggered");

}

const search = () => {
  console.log("search triggered");

  picker.value.searchByKeyword('充电站')
}

</script>
<style scoped lang="scss">
#map {
  width: 100%;
  height: 400px;
  background: #fff;
  position: relative;
}

#result {
  position: absolute;
  right: 0;
  width: 300px;
  height: 300px;
  top: 30px;
}

#pickerInput {
  top: 20px;
  float: right;
  right: 20px;
  z-index: 9000;
  height: 30px;
  position: absolute;
}
</style>
